<markdown>
# UpdateValue event

Why make the `update:value` event an example? Because there's so little to write.
</markdown>

<script lang="ts" setup>
import type { SelectOption } from 'naive-ui'
import { useMessage } from 'naive-ui'

const message = useMessage()

function handleUpdateValue(value: string, option: SelectOption) {
  message.info(`value: ${JSON.stringify(value)}`)
  message.info(`option: ${JSON.stringify(option)}`)
}

const options = [
  {
    label: 'Drive My Car',
    value: 'song1'
  },
  {
    label: 'Norwegian Wood',
    value: 'song2'
  },
  {
    label: 'You Won\'t See',
    value: 'song3'
  },
  {
    label: 'Nowhere Man',
    value: 'song4'
  },
  {
    label: 'Think For Yourself',
    value: 'song5'
  },
  {
    label: 'The Word',
    value: 'song6'
  },
  {
    label: 'Michelle',
    value: 'song7'
  },
  {
    label: 'What goes on',
    value: 'song8'
  },
  {
    label: 'Girl',
    value: 'song9'
  },
  {
    label: 'I\'m looking through you',
    value: 'song10'
  },
  {
    label: 'In My Life',
    value: 'song11'
  },
  {
    label: 'Wait',
    value: 'song12'
  }
]
</script>

<template>
  <n-space vertical>
    <n-select
      placeholder="Please select a song"
      :options="options"
      @update:value="handleUpdateValue"
    />
    <n-select
      multiple
      placeholder="Please Select Songs"
      :options="options"
      @update:value="handleUpdateValue"
    />
  </n-space>
</template>
